import { defineComponent, ref, h, DefineComponent, inject, } from "vue";
import { NCard, NButton, NSpace, } from "naive-ui"
import Maincontainer from "@/components/maincontainer/index"
import Flexform, { flexformitem } from "@/components/flexform/index"
import useTableIndex from "@/hooks/tableindex"
import useHttpMessage from "@/hooks/oftenattr"
import useColums from "@/hooks/colums"
import Flextalbe from "../../../components/flextable/index"
import Mypage from "../../../components/mypage/index"
import EditModel from "./editModel";
import { useRoute } from "vue-router";
export default defineComponent({
    name: "menumanager",
    setup(props, ctx) {
        const route = useRoute()
        /**********************************************************************************
         * 从钩子函数引入必要的属性和方法
        ***********************************************************************************/
        const {
            formValue,
            loading,
            total,
            tableData,
            editRef,
            pageRef,
            formRef,
            handleSearch,
            handleResetForm,
            handleView,
            handleEdit,
            handleCreate,
            refreshDelete
        } = useTableIndex()
        const { http, message } = useHttpMessage()
        const { index, createdTime, changeTime, desc, name, } = useColums()
        /**********************************************************************************
        * 自定义的属性和方法
       ***********************************************************************************/
        const overDeleteFunc: Function | undefined = inject("overDeleteFunc")
        const handleDelete = (data: any, index: number) => {
            const params = { "id": data.id }
            overDeleteFunc && overDeleteFunc(params, http.zidiandelete, refreshDelete, "字典")
        }
        const getTableDataFunc = (page: number, pageSize: number) => {
            const params = { page, pageSize, ...formValue.value }
            http.menulist(params).then((res: any) => {
                if (res.data.code === 0) {
                    tableData.value = res.data.items || []
                    total.value = res.data.total || 0
                } else {
                    tableData.value = []
                    total.value = 0
                    message.error(res.data.msg || "获取菜单列表失败")
                }
            }).catch((err: Error) => {
                tableData.value = []
                total.value = 0
                message.error(err.message || "系统错误")
            })
        }
        const formList = ref([
            {
                span: 6,
                label: "名称",
                key: "name",
                default: "",
                type: "input",
                placeholder: "请输入名称",
            },
            { slot: (item: flexformitem) => <div class="w-full"></div>, span: 6, type: "slot" },
            { slot: (item: flexformitem) => <div class="w-full"></div>, span: 6, type: "slot" },
            {
                slot: (item: flexformitem) => <div class="w-full mt-3px">
                    <NButton size={"small"} onClick={handleSearch}>搜索</NButton><NButton size={"small"} onClick={handleResetForm}>重置</NButton><NButton size={"small"} onClick={handleCreate}>新建</NButton></div>, span: 6, type: "slot"
            }
        ])
        const colnums = ref([
            index,
            name,
            {
                title: "排序", key: "sort",
            },
            {
                title: "分类", key: "fenlei",
            },
            {
                title: "上级菜单", key: "parent", render: (data: any, index: number) => {
                    return data["parent"] ? data["parent"].name : "无"
                }
            },
            {
                title: "是否缓存", key: "cache", render: (data: any, index: number) => {
                    return data["cache"] === 1 ? "是" : ""
                }
            },
            {
                title: "是否启用", key: "status", render: (data: any, index: number) => {
                    return data["cache"] === 1 ? "是" : ""
                }
            },
            {
                title: "是否侧边展示", key: "show", render: (data: any, index: number) => {
                    return data["cache"] === 1 ? "是" : ""
                }
            },
            {
                title: "是否打开新页面", key: "blank", render: (data: any, index: number) => {
                    return data["cache"] === 1 ? "是" : ""
                }
            },
            desc,
            createdTime,
            changeTime,
            {
                title: "操作",
                width: 200,
                render: (data: any, index: number) => {
                    return h(NSpace, {}, {
                        default() {
                            return [
                                h(NButton, { size: "small", onClick: () => handleView(data), type: "primary" }, { default() { return "查看" } }),
                                h(NButton, { size: "small", onClick: () => handleEdit(data), type: "info" }, { default() { return "修改" } }),
                                h(NButton, { size: "small", onClick: () => handleDelete(data, index), type: "error" }, { default() { return "删除" } }),
                            ]
                        }
                    })
                }
            },
        ])

        // 初始化函数
        const init = () => {
            console.log("有人调用初始化方法111");            
            pageRef.value && pageRef.value.changePage()
        }
        // 获取上面注入的函数
        const zhucefunc: Function | undefined = inject("zhuceshuaxinfunc")
        /**********************************************************************************
        * 初始化执行和生命周期执行
       ***********************************************************************************/
        init()
        zhucefunc && zhucefunc({ [route.name!.toString()]: init })
        /**********************************************************************************
        * html和css
       ***********************************************************************************/
        return () => (
            <Maincontainer>
                <NCard content-style="padding-bottom: 0;" class="flex-shrink-0">
                    <Flexform formValue={formValue.value} formList={formList.value} />
                </NCard>
                <NCard class="flex-1" content-style="padding: 0;">
                    <Flextalbe tableData={tableData.value} tableColums={colnums.value}></Flextalbe>
                </NCard>
                <NCard class="h-40px flex-shrink-0" content-style={{ display: "flex", justifyContent: "center", alignItems: "center", padding: 0 }}>
                    <Mypage ref={pageRef} total={total.value} onGet={getTableDataFunc} />
                </NCard>
                <EditModel ref={editRef} close={refreshDelete} />
            </Maincontainer>
        )
    },
})
